<template>
    <div>
        <!-- 开头 -->
        <div class="bg-box-class">
            <div class="bg-img-class">
                <div class="title">
                    <div class="title-class">
                        <h1 class="title-size">代码分析系统官网</h1>
                    </div>
                    <div class="title-class">
                        <p class="p-class">欢迎来到代码分析系统官网，展示最新的代码分析案例，助您提高代码质量与效率。</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 中间 -->
        <div class="center-class">
            <div class="left-class">
                <div class="content-class">
                    <div class="content-title-class">立即体验</div>
                    <div class="content-title-desc-class">马上注册并登录，提交您的代码分析需求，获取专业的代码分析报告。</div>
                    <div class="content-btn-class">
                        <div class="register-btn-class" @click="openRouter('/register')">注册</div>
                        <div class="login-btn-class" @click="openRouter('/login')">登录</div>
                    </div>
                </div>
            </div>
            <div class="right-class">
                <div class="right-img-class"></div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const openRouter=(routerPath)=>{
    router.push(routerPath)
} 
</script>
<style scoped >
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

.right-img-class {
    left: 0px;
    top: 0px;
    width: 80%;
    height: 70%;
    opacity: 1;
    border-radius: 32px;
    background: url(https://img.jsdesign2.com/assets/img/6540aec61a053737e6d3fcfb.png#bf25a99d67b76696f9cdd2aa4308e545);

}

.login-btn-class {
    left: 104px;
    top: 0px;
    width: 88px;
    height: 42px;
    opacity: 1;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.08);
    margin-left: 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 24px 0px 24px;

}

.register-btn-class {
    left: 0px;
    top: 0px;
    width: 88px;
    height: 42px;
    opacity: 1;
    color: black;
    border-radius: 40px;
    background: rgba(255, 215, 0, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 24px 0px 24px;
    font-size: 13px;

}

.content-btn-class {
    margin-top: 20px;
    display: flex;
}

.content-class {
    display: grid;
    width: 70%;
}

.content-title-class {
    font-size: 28px;
    font-weight: bolder;
}

.content-title-desc-class {
    margin-top: 13px;
    font-size: 18px;
}

.left-class {
    height: 100%;
    width: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-class {
    /* background: pink; */
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-class {
    display: flex;
    justify-content: space-between;
    height: 600px;
}

.bg-img-class {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    height: 800px;
    background-repeat: no-repeat;
    background-position: center;
    backdrop-filter: blur(10px);
    background-size: cover;
    /* 或 contain */
    background: url(https://img.jsdesign2.com/assets/img/666fcf72e17af732d6f7bf87.png#31c9e53400fca59d493342648576e93d);
}

.bg-img-class::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 设置遮罩层的颜色和透明度 */
    backdrop-filter: blur(5px);
    /* 设置遮罩层的模糊程度 */
}

.bg-box-class {}

.title {
    backdrop-filter: blur(0px);
    font-family: 'Pacifico', sans-serif;
}

.title-class {
    color: rgb(253, 253, 253);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.title-size {
    font-weight: bolder;
    font-size: 3vw;
    letter-spacing: 0.2cm;
}

.p-class {
    font-size: 18px;
}
</style>